```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git子模块与子树完全指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            margin-top: 1.5em;
            margin-bottom: 0.8em;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background-color: #282c34;
            border-radius: 8px;
            padding: 1.5em;
            position: relative;
            overflow: hidden;
        }
        .code-block::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #6ee7b7, #3b82f6);
        }
        .comparison-table {
            border-collapse: collapse;
            width: 100%;
        }
        .comparison-table th, .comparison-table td {
            border: 1px solid #e2e8f0;
            padding: 12px 15px;
            text-align: left;
        }
        .comparison-table th {
            background-color: #f8fafc;
            font-weight: 600;
        }
        .comparison-table tr:nth-child(even) {
            background-color: #f8fafc;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .mermaid {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <div class="flex justify-center mb-6">
                <span class="px-4 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium">版本控制指南</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-6">掌握Git子模块与子树</h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto mb-8">高效管理多仓库项目的终极解决方案</p>
            <div class="flex justify-center space-x-4">
                <a href="#intro" class="px-6 py-3 bg-white text-indigo-700 font-medium rounded-full hover:bg-opacity-90 transition duration-300">
                    <i class="fas fa-book-open mr-2"></i>开始阅读
                </a>
                <a href="#comparison" class="px-6 py-3 border border-white text-white font-medium rounded-full hover:bg-white hover:bg-opacity-10 transition duration-300">
                    <i class="fas fa-table mr-2"></i>对比表格
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-5xl px-4 py-12 md:py-20">
        <!-- Introduction -->
        <section id="intro" class="mb-20">
            <div class="prose max-w-none">
                <h2 class="text-3xl font-bold text-gray-800 mb-6">为什么需要Git子模块和子树？</h2>
                <p class="text-lg text-gray-700 mb-8">在企业级开发或大型项目中，多个团队往往会分别维护不同的代码仓库，而这些仓库之间又可能存在一定的依赖关系。为了更好地管理这些多仓库项目，我们可以利用Git提供的<strong>子模块（Submodule）</strong>和<strong>子树（Subtree）</strong>机制。这两种方法都能在一个Git仓库中嵌套另一个仓库，但它们的原理和使用方式有所不同。</p>
                
                <div class="grid md:grid-cols-3 gap-6 mb-12">
                    <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                        <div class="text-indigo-600 mb-4 text-2xl">
                            <i class="fas fa-puzzle-piece"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">依赖组件管理</h3>
                        <p class="text-gray-600">例如，一个Web项目可能依赖一个独立开发的UI组件库或SDK，而这些库又需要独立版本管理。</p>
                    </div>
                    <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                        <div class="text-blue-600 mb-4 text-2xl">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">跨团队协作</h3>
                        <p class="text-gray-600">不同团队可能分别维护不同的代码库，但在某些情况下，它们需要一起交付或部署。</p>
                    </div>
                    <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                        <div class="text-purple-600 mb-4 text-2xl">
                            <i class="fas fa-server"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">微服务架构</h3>
                        <p class="text-gray-600">每个微服务可能是一个独立的Git仓库，但它们可能共享一些公共代码，如API规范或工具库。</p>
                    </div>
                </div>

                <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg mb-10">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-lg font-medium text-blue-800">避免简单的"复制粘贴"代码</h3>
                            <div class="mt-2 text-blue-700">
                                <p>通过使用Git子模块或子树，可以提高版本管理的可控性，而不是简单地将代码复制到项目中。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Submodule Section -->
        <section id="submodule" class="mb-20">
            <div class="prose max-w-none">
                <h2 class="text-3xl font-bold text-gray-800 mb-6">Git子模块（Submodule）</h2>
                
                <h3 class="text-2xl font-semibold text-gray-700 mb-4">什么是Git子模块？</h3>
                <p class="mb-6">Git<strong>子模块（Submodule）</strong>允许你在一个Git仓库（主仓库）中嵌套另一个Git仓库（子仓库）。子模块本质上是一个指向外部Git仓库的引用，而不是直接存储该仓库的内容。</p>
                
                <div class="bg-yellow-50 border-l-4 border-yellow-500 p-6 rounded-r-lg mb-8">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-yellow-600 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-lg font-medium text-yellow-800">子模块的特点</h3>
                            <ul class="mt-2 text-yellow-700 list-disc pl-5">
                                <li><strong>子仓库独立版本管理</strong>：子模块本身仍然是一个独立的Git仓库，拥有自己的提交历史</li>
                                <li><strong>主仓库只存子仓库的引用</strong>：主仓库不会直接存储子仓库的代码，而是记录子仓库的特定提交SHA</li>
                                <li><strong>需要手动更新</strong>：如果子仓库发生了变更，主仓库不会自动获取最新内容，需要手动拉取更新</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <h3 class="text-2xl font-semibold text-gray-700 mb-4 mt-10">如何使用Git子模块？</h3>
                
                <h4 class="text-xl font-medium text-gray-700 mb-3">1. 添加子模块</h4>
                <p class="mb-4">假设你有一个主仓库<code>main-repo</code>，你想在其中添加一个<code>common-lib</code>仓库作为子模块：</p>
                
                <div class="code-block text-gray-200 mb-6">
                    <pre><code>git submodule add https://github.com/your-org/common-lib.git libs/common-lib
git commit -m "添加 common-lib 作为子模块"</code></pre>
                </div>
                <p class="mb-8">这将在<code>libs/common-lib/</code>目录下克隆<code>common-lib</code>仓库，并记录它的当前提交哈希值。</p>
                
                <h4 class="text-xl font-medium text-gray-700 mb-3">2. 初始化和更新子模块</h4>
                <p class="mb-4">当你克隆包含子模块的主仓库时，默认情况下子模块的内容不会自动拉取，需要手动执行以下命令：</p>
                
                <div class="code-block text-gray-200 mb-6">
                    <pre><code>git submodule update --init --recursive</code></pre>
                </div>
                <ul class="mb-8 list-disc pl-5 text-gray-700">
                    <li><code>--init</code>：初始化子模块（仅在第一次使用时需要）</li>
                    <li><code>--recursive</code>：如果子模块本身也包含子模块，则递归更新所有子模块</li>
                </ul>
                
                <h4 class="text-xl font-medium text-gray-700 mb-3">3. 更新子模块到最新版本</h4>
                <p class="mb-4">如果<code>common-lib</code>仓库有新的提交，主仓库不会自动获取最新代码。你需要进入子模块目录，拉取最新内容并更新主仓库的记录：</p>
                
                <div class="code-block text-gray-200 mb-6">
                    <pre><code>cd libs/common-lib
git pull origin main
cd ../..
git add libs/common-lib
git commit -m "更新 common-lib 子模块"</code></pre>
                </div>
                <div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-lg mb-8">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-600 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-red-700"><strong>注意：</strong>主仓库只会记录子模块的某个特定提交，而不会自动跟随<code>main</code>分支的最新提交。</p>
                        </div>
                    </div>
                </div>
                
                <h4 class="text-xl font-medium text-gray-700 mb-3">4. 删除子模块</h4>
                <p class="mb-4">如果你不再需要子模块，可以执行以下操作：</p>
                
                <div class="code-block text-gray-200 mb-6">
                    <pre><code>git submodule deinit libs/common-lib
git rm libs/common-lib
rm -rf .git/modules/libs/common-lib
git commit -m "移除 common-lib 子模块"</code></pre>
                </div>
            </div>
        </section>

        <!-- Subtree Section -->
        <section id="subtree" class="mb-20">
            <div class="prose max-w-none">
                <h2 class="text-3xl font-bold text-gray-800 mb-6">Git子树（Subtree）</h2>
                
                <h3 class="text-2xl font-semibold text-gray-700 mb-4">什么是Git子树？</h3>
                <p class="mb-6">Git<strong>子树（Subtree）</strong>是一种更灵活的方式，允许你直接将另一个Git仓库的代码合并到主仓库，而不是仅仅存储引用。</p>
                
                <div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg mb-8">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-green-600 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-lg font-medium text-green-800">子树的特点</h3>
                            <ul class="mt-2 text-green-700 list-disc pl-5">
                                <li><strong>不需要单独管理子模块</strong>：子仓库的代码直接合并到主仓库中，不需要额外的<code>git submodule update</code>过程</li>
                                <li><strong>子仓库仍可独立更新</strong>：可以在主仓库中同步子仓库的变更，或者推送变更到子仓库</li>
                                <li><strong>适合较紧密的依赖关系</strong>：如果子仓库的代码和主仓库的耦合度较高，子树方式更加方便</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <h3 class="text-2xl font-semibold text-gray-700 mb-4 mt-10">如何使用Git子树？</h3>
                
                <h4 class="text-xl font-medium text-gray-700 mb-3">1. 添加子树</h4>
                <p class="mb-4">假设你想把<code>common-lib</code>仓库的代码合并到<code>libs/common-lib/</code>目录下：</p>
                
                <div class="code-block text-gray-200 mb-6">
                    <pre><code>git subtree add --prefix=libs/common-lib https://github.com/your-org/common-lib.git main --squash</code></pre>
                </div>
                <ul class="mb-8 list-disc pl-5 text-gray-700">
                    <li><code>--prefix=libs/common-lib</code>：指定子树存放的目录</li>
                    <li><code>main</code>：子仓库的分支</li>
                    <li><code>--squash</code>：合并子仓库时会压缩提交历史，使提交历史更清晰</li>
                </ul>
                
                <h4 class="text-xl font-medium text-gray-700 mb-3">2. 更新子树代码</h4>
                <p class="mb-4">如果<code>common-lib</code>仓库有新的提交，可以同步到主仓库：</p>
                
                <div class="code-block text-gray-200 mb-6">
                    <pre><code>git subtree pull --prefix=libs/common-lib https://github.com/your-org/common-lib.git main --squash</code></pre>
                </div>
                
                <h4 class="text-xl font-medium text-gray-700 mb-3">3. 推送主仓库的修改到子仓库</h4>
                <p class="mb-4">如果你在主仓库中修改了<code>common-lib</code>代码，并希望同步到<code>common-lib</code>仓库，可以执行：</p>
                
                <div class="code-block text-gray-200 mb-6">
                    <pre><code>git subtree push --prefix=libs/common-lib https://github.com/your-org/common-lib.git main</code></pre>
                </div>
            </div>
        </section>

        <!-- Comparison Section -->
        <section id="comparison" class="mb-20">
            <div class="prose max-w-none">
                <h2 class="text-3xl font-bold text-gray-800 mb-6">Git子模块 vs. Git子树：如何选择？</h2>
                
                <div class="overflow-x-auto mb-8">
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>特性</th>
                                <th>Git子模块（Submodule）</th>
                                <th>Git子树（Subtree）</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>代码存储方式</strong></td>
                                <td>仅存储子仓库引用，不存代码</td>
                                <td>直接存储子仓库代码</td>
                            </tr>
                            <tr>
                                <td><strong>更新方式</strong></td>
                                <td>需要手动更新子模块</td>
                                <td>可以直接拉取合并</td>
                            </tr>
                            <tr>
                                <td><strong>提交历史</strong></td>
                                <td>主仓库不记录子仓库提交历史</td>
                                <td>主仓库会记录子仓库提交</td>
                            </tr>
                            <tr>
                                <td><strong>适用场景</strong></td>
                                <td>需要独立维护的第三方库</td>
                                <td>依赖较紧密的子项目</td>
                            </tr>
                            <tr>
                                <td><strong>复杂度</strong></td>
                                <td>需要手动管理，较复杂</td>
                                <td>操作更简单，适合团队协作</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="grid md:grid-cols-2 gap-8">
                    <div class="bg-white p-6 rounded-xl shadow-sm border border-blue-100">
                        <h3 class="text-xl font-semibold text-blue-700 mb-4">什么时候选择<strong>子模块</strong>？</h3>
                        <ul class="list-disc pl-5 text-gray-700 space-y-2">
                            <li>子仓库是独立维护的，例如第三方SDK、开源库等</li>
                            <li>需要保持子仓库的提交历史完整</li>
                            <li>不希望主仓库存储子仓库代码，只存引用</li>
                        </ul>
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-sm border border-purple-100">
                        <h3 class="text-xl font-semibold text-purple-700 mb-4">什么时候选择<strong>子树</strong>？</h3>
                        <ul class="list-disc pl-5 text-gray-700 space-y-2">
                            <li>代码库之间的耦合较强，主仓库需要直接访问子仓库的代码</li>
                            <li>希望在主仓库中管理所有代码，不依赖外部仓库</li>
                            <li>不想额外管理子模块的更新流程</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization -->
        <section class="mb-20">
            <div class="prose max-w-none">
                <h2 class="text-3xl font-bold text-gray-800 mb-6">Git子模块与子树工作流程对比</h2>
                <div class="mermaid">
                    graph TD
                        A[主仓库] -->|子模块| B[子仓库]
                        A -->|子树| C[子仓库代码]
                        style A fill:#f0f9ff,stroke:#3490dc
                        style B fill:#f5f0ff,stroke:#7c3aed
                        style C fill:#f0fdf4,stroke:#10b981
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="text-center">
                <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                <p class="mb-6">探索技术的无限可能</p>
                <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
                    <i class="fas fa-external-link-alt mr-1"></i> www.yuque.com/jtostring
                </a>
            </div>
        </div>
    </footer>

    <!-- Mermaid.js -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```